<!-- 咨询及评价-商品咨询 -->
<template>
    <div>
        <el-card class="contain" style="max-width: 100%;">
            <search-box :tableDataInput="tableData" :searchField="'consult'" @search="handleSearch"></search-box>
            <el-table :data="selectedItems" style="margin-top: 16px;" :row-style="{ height: '50px' }"
                :header-cell-style="{ background: '#EBEEF2' }">
                <el-table-column class="column" width="260" label="咨询内容">
                    <template slot-scope="scope">
                        <div class="contentDiv">
                            <span v-if="scope.row.replyCount == 0" class="newImage">
                                <img src="@/assets/consult/new.png">
                            </span>
                            <span>{{ scope.row.content }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="spData" width="130" label="商品信息" />
                <el-table-column prop="createTime" align="center" label="咨询时间" />
                <el-table-column prop="seekAdviceNickname" width="80" label="咨询人" />
                <el-table-column width="90" label="状态" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.replies.length != 0">已回复</span>
                        <span v-else>待回复</span>
                    </template>
                </el-table-column>
                <el-table-column width="260" label="回复内容">
                    <template slot-scope="scope">
                        <span class=""  v-if="scope.row.replies.length != 0" @click="viewAllReply(scope.$index,scope.row)">
                            {{ scope.row.replies[0].replayContent }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" width="140" align="center" label="回复时间">
                    <template slot-scope="scope">
                        <span class="" v-if="scope.row.replies.length != 0">
                            {{ scope.row.replies[0].createTime }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span class="con_div" @click="undercarriage(scope.$index, scope.row)">
                            <img class="con_div_img" src="@/assets/consult/answer.png" alt="" srcset="">
                            <span class="con_div_span">回复</span></span>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-pagination background layout="->,prev, pager,next,total" :page-size="10" :total="tableDataLength"
            @current-change="handleCurrentChange" style="margin-top: 20px;">
        </el-pagination>
        <replyDialog :visible="replyVisiable" :Data="currentRow" @update-visible="updateVisible" />
        <allReplyDialog :visible="allReplyVisiable" :Data="currentAllRow" @update-visible="updateAllVisible"/>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import { getConsultReply } from '@/api/api'
import replyDialog from './components/replyDialog.vue';
import allReplyDialog from './components/allReply.vue'

export default {
    components:{replyDialog,allReplyDialog},
    data() {
        return {
            selectedItems: [],
            tableDataLength: 0,
            replyVisiable:false,
            allReplyVisiable:false,
            currentRow:{},
            currentAllRow:{},
            tableData: [
                {},
            ],
            Consultdetail:{ //请求参数
                content: '',
                pageNo: 1,
            }
        }
    },
    // 获取列表数据
    async created() {
        return this.getConsultReplylist(this.Consultdetail)
    },
    watch: {
        selectedItems: {
            handler(newVal) {
                this.updateRowCount(newVal.length);
            },
            deep: true
        }
    },
    methods: {
        ...mapActions(['updateRowCount']),
        async getConsultReplylist(data) {
            this.selectedItems = this.tableData; // 初始显示所有商品
            try {
                const res = await getConsultReply(data) // 传入页码
                // console.log("==========="+res.data.result.records)
                if (res.data.code == 200) {
                    const list_data = res.data.result.records;
                    this.selectedItems = list_data;
                    this.tableData = list_data;
                    this.tableDataLength = res.data.result.total;
                }
            } catch (error) {
                console.log(error)
            }
        },
        handleCurrentChange(val) {
            this.Consultdetail.pageNo = val
            this.getConsultReplylist(this.Consultdetail);
        },
        handleSearch(name) {
            // this.selectedItems = filtered;
            this.Consultdetail.content = name
            this.getConsultReplylist(this.Consultdetail);
        },
        undercarriage(index, row) {
            this.currentRow = row;
            this.replyVisiable = true;
        },
        viewAllReply(index,row){
            this.currentAllRow = row;
            this.allReplyVisiable = true;
        },
        updateVisible() {
            this.replyVisiable = false
            this.getConsultReplylist(this.Consultdetail)
        },
        updateAllVisible() {
            this.allReplyVisiable = false
        }

    },
}
</script>

<style scoped>
.input1 {
    font-size: 16px;
    width: 241px;
    opacity: 1;
    border-radius: 80px;
    background: rgb(153, 155, 158);
}

.input1>>>input.el-input__inner {
    background: rgba(235, 238, 242, 1);
    border-radius: 20px;
}

img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.icon {
    margin-top: 15px;
}

.text {
    display: inline-block;
    line-height: 5px;
    transform: translateY(-5px);
}


.contain >>>  .el-table th.el-table__cell>.cell {
    font-size: 12px;
    font-weight: 500;
    /* text-align: left; */
}

.contain >>> .el-table td.el-table__cell div{
    display: flex;
    align-items: center;
    /* text-align: left; */
    height: 60px;
}

.con_div {
    width: 100%;
    justify-content: center;
    align-items: center;
    /* transform: translateX(-5px); */
}

.con_div_img {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    /* 可以让图片与文本垂直居中 */
}

.con_div_span {
    /* 调整间距，使文本与图片之间有一定的距离 */
    font-size: 12px;
    vertical-align: middle;
    /* 与图片垂直对齐 */
    display: inline-block;
    /* 确保span是内联块元素 */
}

.newImage {
    display: flex;
    align-items: center;
}
</style>